<template>
    <div class="set-icon-container">
        <div class="setting-panel" mb20>
            <div class="flex-around">
                <div class="icon-part">
                    <div class="default-icon flex-center" :class="{ 'active': iconType == 'default' }">
                        <img src="src/assets/images/svg/icon_about.svg" alt="">
                    </div>
                    <span class="btn" :class="{'active':iconType == 'default'}" @click="handleChangeIconType('default')">默认</span>
                </div>
                <div class="icon-part">
                    <div class="circle-icon flex-center" :class="{ 'active': iconType == 'circle' }">
                        <img style="border-radius: 50%;" src="src/assets/images/svg/icon_about.svg" alt="">
                    </div>
                    <span class="btn" :class="{ 'active': iconType == 'circle' }" @click="handleChangeIconType('circle')">圆形</span>
                </div>
            </div>
            <hr mt20 mb10 />
            <div class="sidebar-autoHide flex-x flex-between">
                <label class="slider-title">图标大小</label>
                <el-slider v-model="iconSize" size="small" show-input :min="50" :max="130" :step="1" />
                <span>px</span>
            </div>
            <div class="sidebar-autoHide flex-x flex-between">
                <label class="slider-title">图标圆角</label>
                <el-slider v-model="iconRadius" size="small" show-input :min="0" :max="iconSize/2" :step="1" />
                <span>px</span>
            </div>
            <div class="sidebar-autoHide flex-x flex-between">
                <label class="slider-title">不透明度</label>
                <el-slider v-model="appOpacity" size="small" show-input :min="0.2" :max="1" :step="0.01" />
                <span>%</span>
            </div>
        </div>
        <p ml8 mb8 leh-24 fs-13>间距</p>
        <div class="setting-panel" mb20>
            <div class="sidebar-autoHide flex-x flex-between">
                <label class="slider-title">图标间距</label>
                <el-slider v-model="iconGap" size="small" show-input :min="0" :max="100" :step="1" />
                <span>px</span>
            </div>
        </div>
        <p ml8 mb8 leh-24 fs-13>名称</p>
        <div class="setting-panel" mb20>
            <div class="sidebar-autoHide flex-x flex-between">
                <label>图标名称</label>
                <el-switch size="small" v-model="showAppName"></el-switch>
            </div>
            <div class="sidebar-autoHide flex-x flex-between">
                <label class="slider-title">文字大小</label>
                <el-slider v-model="appFontSize" size="small" show-input :min="12" :max="20" :step="1" />
                <span>px</span>
            </div>
            <div>
                <label leh-36>文字颜色</label>
                <ul flex class="color-select-list" pd0>
                    <li v-for="item in bgColors">
                        <div class="color-select-item" style="margin-right: 5px;"
                            :style="{ background: item, borderColor: item == '#fff' ? '#0000004d' : 'transparent' }"
                            @click="handleSelectBgColor(item)">
                            <i class="iconfont icon-gou" v-if="item == appFontColor" :style="{ color: item == '#fff' ? '#0000004d' : '#fff' }"></i>
                        </div>
                    </li>
                    <li>
                        <el-color-picker v-model="appFontColor"/>
                    </li>
                </ul>
            </div>
        </div>
        <p ml8 mb8 leh-24 fs-13>图标最大宽度</p>
        <div class="setting-panel" mb20>
            <div class="sidebar-autoHide flex-x">
                <label style="margin-right: auto;">单位</label>
                <span>px</span>
                <el-switch size="small" ml10 mr10></el-switch>
                <span>%</span>
            </div>
            <div class="sidebar-autoHide flex-x flex-between">
                <el-slider size="small" v-model="appGridWidth" show-input :min="900" :max="2000" :step="1" />
                <span>px</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/store/module/global';

const globalStore = useGlobalStore()

const iconSize = ref(globalStore.sidebar.iconSize)
const iconRadius = ref(globalStore.sidebar.iconRadius)
const appGridWidth = ref(globalStore.sidebar.appGridWidth)
const iconGap = ref(globalStore.sidebar.iconGap)
const appOpacity = ref(globalStore.sidebar.appOpacity)
const showAppName = ref(globalStore.showAppName)
const appFontSize = ref(globalStore.sidebar.appFontSize)
const appFontColor = ref(globalStore.sidebar.appFontColor)

const bgColors = ['#fff', 'rgb(46, 204, 113)', 'rgb(51, 197, 197)', 'rgb(155, 89, 182)', 'rgb(241, 196, 15)', 'rgb(230, 126, 34)', 'rgb(231, 76, 60)']

const handleSelectBgColor = (color: string) => {
    appFontColor.value = color
}

const iconType = ref('default')
const iconDefaultRadius = ref(iconSize.value)
const handleChangeIconType = (type:string) => {
    iconType.value = type
    if(type == 'circle'){
        iconDefaultRadius.value = iconRadius.value
        iconRadius.value = iconSize.value/2
        return
    }
    iconRadius.value = iconDefaultRadius.value
}

watchEffect(() => {
    globalStore.setIconSize(iconSize.value)
    globalStore.setIconComputedSize(iconSize.value)
    globalStore.setIconRadius(iconRadius.value)
    globalStore.setIconComputedRadius(iconRadius.value)
    globalStore.setAppGridWidth(appGridWidth.value)
    globalStore.setAppOpacity(appOpacity.value)
    globalStore.setIconGap(iconGap.value)
    globalStore.setIconComputedGap(iconGap.value)
    globalStore.setShowAppName(showAppName.value)
    globalStore.setAppFontColor(appFontColor.value)
    globalStore.setAppFontSize(appFontSize.value)
})
</script>

<style scoped lang="scss">
.set-icon-container {

    .icon-part {
        text-align: center;
    }

    .default-icon,
    .circle-icon {
        width: 60px;
        height: 60px;
        border: 1px solid rgba(var(--alpha-color), 0.1);
        border-radius: 6px;
        background-color: var(-bg-card);

        img {
            width: 3rem;
            height: 3rem;
            border-radius: 6px;
            background-color: var(--icon-bg);
        }

        &.active {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }
    }

    .btn {
        font-size: 12px;
        width: 50px;
        height: 24px;
        line-height: 24px;
        border-radius: 12px;
        display: inline-block;
        margin-top: 10px;
        cursor: pointer;

        &.active {
            background-color: var(--primary-color);
            color: $color-white;
        }
    }
}
</style>